<template>
	<div class="regBox" v-if="is_show">
		<div class="con">
			<i aria-label="图标: close" class="close" @click="closeReg">
				<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" data-icon="close" fill="currentColor" aria-hidden="true" focusable="false" class="">
					<g id="comm_icon_x" transform="translate(-1209.5 -160.5)">
						<path id="Line_14" data-name="Line 14" d="M14,15a1,1,0,0,1-.707-.293l-14-14a1,1,0,0,1,0-1.414,1,1,0,0,1,1.414,0l14,14A1,1,0,0,1,14,15Z" transform="translate(1210.5 161.5)"></path>
						<path id="Line_15" data-name="Line 15" d="M0,15a1,1,0,0,1-.707-.293,1,1,0,0,1,0-1.414l14-14a1,1,0,0,1,1.414,0,1,1,0,0,1,0,1.414l-14,14A1,1,0,0,1,0,15Z" transform="translate(1210.5 161.5)"></path>
					</g>
				</svg>
			</i>
			<div class="title">{{$t('h_pcreg.title1')}}</div>
			<div class="item">
				<div style="width: 40px;display: flex;justify-content: center;align-items: center;">
					<i style="display: inline-flex; justify-content: center; align-items: center;">
						<svg viewBox="0 0 20.001 20" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
							<use xlink:href="/icons/icon.svg#icon_dl_zh--sprite"></use>
						</svg>
					</i>
				</div>
				<el-input :placeholder="$t('h_pcreg.title2')" v-model="formData.username"></el-input>
			</div>
			<div class="item">
				<div style="width: 40px;display: flex;justify-content: center;align-items: center;">
					<i style="display: inline-flex; justify-content: center; align-items: center;">
						<svg viewBox="0 0 20.001 20" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
							<use xlink:href="/icons/icon.svg#icon_dl_mm--sprite"></use>
						</svg>
					</i>
				</div>
				<el-input :placeholder="$t('h_pcreg.title3')" v-model="formData.password" type="password" :show-password="true"></el-input>
			</div>
			<div class="item">
				<div style="width: 40px;display: flex;justify-content: center;align-items: center;">
					<i style="display: inline-flex; justify-content: center; align-items: center;">
						<svg viewBox="0 0 20.001 20" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
							<use xlink:href="/icons/icon.svg#icon_dl_mm--sprite"></use>
						</svg>
					</i>
				</div>
				<el-input :placeholder="$t('h_pcreg.title4')" v-model="formData.password_cp" type="password" :show-password="true"></el-input>
			</div>
			<div class="item">
				<div style="width: 40px;display: flex;justify-content: center;align-items: center;">
					<i style="display: inline-flex; justify-content: center; align-items: center;">
						<svg viewBox="0 0 20.001 20" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
							<use xlink:href="/icons/icon.svg#icon_dl_mm--sprite"></use>
						</svg>
					</i>
				</div>
				<el-input :placeholder="$t('l_qingshuruxingming')" v-model="formData.real_name"></el-input>
			</div>
			<div class="item"  v-if="config.is_regtj_1==1">
				<div style="width: 40px;display: flex;justify-content: center;align-items: center;">
					<i style="display: inline-flex; justify-content: center; align-items: center;">
						<svg viewBox="0 0 20.001 20" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
							<use xlink:href="/icons/icon.svg#icon_dl_mm--sprite"></use>
						</svg>
					</i>
				</div>
				<el-input :placeholder="$t('h_pcreg.title17')" v-model="formData.invite_code"></el-input>
			</div>
			<div class="item1">
				<div class="fstart">
					<el-checkbox v-model="checked" :label="$t('h_pcreg.title5')" size="large" />
					<span @click="openUserMsg">{{$t('h_pcreg.title6')}}</span>
				</div>
			</div>
			<div class="btn" @click="submit">{{$t('h_pcreg.title1')}}</div>
			<div class="item1" style="justify-content: flex-end;">
				<div class="text" @click="openLogin">{{$t('h_pcreg.title7')}}</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				is_show:false,
				checked:true,
				formData: {
					username: '',
					password: '',
					password_cp: '',
					invite_code:"",//邀请码
					real_name:"",//真实姓名
				},
				config:{}
			};
		},
		mounted(){
			if(localStorage.getItem('inviteCodeValue')){
				this.formData.invite_code=localStorage.getItem('inviteCodeValue')
			}

			let that = this;
				this.$api.ConfigGetConfig({
					key: 'app_down_url',
				}, (res) => {
				
					if (res.code == 0) {
						that.config=res.data[1].value;

					
						// window.open(res.data[0].value)
						// that.$router.push('../../index/downloadapp?url=' + res.data[0].value)
					} else {
						// that.$message.error(res.msg);
					}
				})
		
		},
		methods: {
			openReg(){
				this.is_show = true
			},
			closeReg(){
				this.is_show = false
			},
			openLogin(){
				this.closeReg()
				this.$parent.openLogin()
			},
			openUserMsg(){
				this.$parent.openUserMsg()
			},
			submit(){
				if(!this.formData.username) return this.$message(this.$t('h_pcreg.title8'));
				let reg =/^[a-zA-Z\d]\w{4,7}[a-zA-Z\d]$/;
				let re = new RegExp(reg)
				if(!re.test(this.formData.username)) return this.$message(this.$t('h_pcreg.title9'));
				if(!this.formData.password || !this.formData.password_cp) return this.$message(this.$t('h_pcreg.title10'));
				if(this.formData.password != this.formData.password_cp) return this.$message(this.$t('h_pcreg.title11'));
				let reg1 =/^[a-zA-Z\d]\w{4,14}[a-zA-Z\d]$/;
				let re1 = new RegExp(reg);
				if(!re1.test(this.formData.password)) return this.$message(this.$t('h_pcreg.title12'));
				if(!this.checked) return this.$message(this.$t('h_pcreg.title13'));
				
				this.$parent.openverifyBox((code,key)=>{
					this.formData.code = code
					this.formData.key = key
					this.formData.reg_domain = window.location.hostname
					let reg_share_domain = localStorage.getItem('reg_share_domain')?localStorage.getItem('reg_share_domain'):'';
					this.formData.reg_share_domain = reg_share_domain
					const loading = this.$loading({
					    lock: true,
					    text: 'Loading',
					    spinner: 'el-icon-loading',
					    background: 'rgba(0, 0, 0, 0.7)'
					});
					this.$api.loginReg(this.formData,(res)=>{
						loading.close();
						if(res.code == 0){
							localStorage.setItem('token',res.data)
							this.$parent.reloadUserInfo();
					
							this.closeReg()
							window.location.href='/'
						}else{
							this.$message.error(res.msg);
						}
					})
				})
				
			}
		}
	}
</script>

<style lang="less" scoped>
	*{
		box-sizing: border-box;
	}
	.regBox{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, .5);
		z-index: 997;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.con{
		width: 433px;
		height: auto;
		background-color: var(--theme-top-nav-bg);;
		border: thin solid;
		border-color: var(--theme-color-line);
		border-radius: 10px;
		position: relative;
		padding: 0 23px 15px 23px;
	}
	.close{
		color: var(--theme-text-color);
		font-size: 12px;
		height: 44px;
		line-height: 44px;
		width: 44px;
		text-align: center;
		position: absolute;
		right: 0;
		top: 0;
	}
	.title{
		margin-top: 15px;
		margin-bottom: 31px;
		font-size: 17px;
		color: #fff;
		font-weight: 700;
		text-align: center;
	}
	.item{
		width: 100%;
		height: 40px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		border: 1px solid var(--theme-color-line);
		color: rgba(0,0,0,.65);
		font-size: 14px;
		margin-bottom: 30px;
		border-radius: 5px;
	}
	.item i{
		width: 15px;
		height: 15px;
		color: var(--theme-alt-neutral-2);
		font-size: 14px;
	}
	/deep/ .el-input{
		flex: 1;
		height: 100%;
	}
	/deep/ .el-input__inner{
		width: 100% !important;
		height: 100% !important;
		border: 0!important;
		padding: 0 !important;
		font-size: 14px !important;
	}
	/deep/ .el-input__icon{
		width: 15px !important;
		height: 15px;
		color: var(--theme-alt-neutral-2);
		line-height: 2 !important;
		font-size: 18px !important;
		margin-right: 10px;
	}
	.item1{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15px;
	}
	.fstart{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	/deep/ .el-checkbox__inner{
		width: 20px !important;
		height: 20px !important;
		margin-top: 0;
	}
	/deep/ .el-checkbox__inner::after{
		width: 40% !important;
		height: 72% !important;
		top: 0;
		left: 5px;
	}
	.text,.fstart span{
		font-size: 14px;
		color: var(--theme-primary-color);
		cursor: pointer;
	}
	.fstart span{
		margin-top: -1px;
		margin-left: 2px;
	}
	.btn{
		width: 100%;
		height: 43px;
		text-align: center;
		line-height: 43px;
		background-color: var(--theme-primary-color);
		margin-bottom: 15px;
		color: #fff;
		font-size: 15px;
		border-radius: 10px;
		cursor: pointer;
	}
	/deep/ .el-checkbox__input.is-checked+.el-checkbox__label{
		color: var(--theme-alt-neutral-2);
	}
</style>